<template>
  <view class="list">
    <view class="listItem" v-for="item of items" :key="item.id">
      <view class="itemHd">
        <view class="let">
          <view class="img"
            ><image :src="item.avatar" mode="aspectFill"></image
          ></view>
          <view class="name">{{ item.name }}</view>
        </view>

        <view class="rig">{{ item.created_at }}</view>
      </view>

      <view class="reply">
        <view class="replyStar">
          <i
            class="iconfont icon-collection-fill"
            v-for="el of parseInt(item.score)"
            :key="el"
          ></i>
        </view>
        <template v-if="item.attr">
          <view class="line"></view>
          <view class="attr">{{ getAttr(item.attr) }}</view>
        </template>
      </view>

      <view class="des">{{ item.content }}</view>

      <view class="imgs" v-if="item.pic_list.length">
        <view class="item" v-for="(el, index) of item.pic_list" :key="index">
          <view class="img" @click="see(item.pic_list, index)">
            <image :src="el" mode="aspectFill"></image
          ></view>
        </view>
      </view>

      <view class="replyCon" v-if="item.reply_content">
        <view class="item">回复：{{ item.reply_content }}</view>
      </view>

      <view class="btn">
        <view class="item" @click="handle('cancel', item.id)">删除</view>
        <view
          class="item on"
          @click="handle('reply', item.id)"
          v-if="!item.reply_content"
          >回复评论</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {};
  },

  computed: {
    getAttr() {
      return (attr) => {
        if (!attr) return "";

        return JSON.parse(attr)
          .map((el) => el.attr_name)
          .join(",");
      };
    },
  },

  methods: {
    handle(type, id) {
      switch (type) {
        case "cancel":
          this.$utils.showModal(
            this.$t("newAdmin.warning.title"),
            this.$t("videoGoods.userInfo.is") + this.$t("cart.delete.is") + "?",
            true,
            () => {
              this.Emit.$emit("handleList", type, id);
            }
          );
          break;

        case "reply":
          this.Emit.$emit("handleList", type, id);
          break;
      }
    },

    see(urls, current) {
      uni.previewImage({
        current,
        urls,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.listItem {
  margin-bottom: 24rpx;
  padding: 0 36rpx;
  background: #fff;
}

.itemHd {
  display: flex;
  align-items: center;
  padding: 36rpx 0 25rpx;

  .let {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .rig {
    padding-left: 10rpx;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .img {
    margin-right: 14rpx;
    width: 60rpx;
    height: 60rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #e4e4e4;
    }
  }

  .name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 30rpx;
  }
}

.reply {
  display: flex;
  align-items: center;

  .line {
    margin: 0 12rpx;
    width: 2rpx;
    height: 12rpx;
    background: #d2d2d2;
  }

  .attr {
    color: #8c8c8c;
    font-size: 24rpx;
  }
}

.replyStar {
  display: flex;
  align-items: center;

  .iconfont {
    color: #f84e18;
    font-size: 34rpx;
  }
}

.des {
  padding: 10rpx 0;
  font-size: 30rpx;
  line-height: 50rpx;
}

.imgs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 -6rpx -6rpx;

  .item {
    width: 25%;
    padding: 0 0 6rpx 6rpx;
    box-sizing: border-box;
  }

  .img {
    position: relative;
    padding-top: 100%;

    image {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
      background: #e4e4e4;
    }
  }
}

.replyCon {
  margin: 18rpx 0 0;
  padding: 10rpx 18rpx;
  font-size: 24rpx;
  color: #8c8c8c;
  background: #f6f6f6;
  border-radius: 12rpx;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 24rpx;
  padding: 24rpx 0;
  border-top: 1px solid #f6f6f6;

  .item {
    margin-left: 16rpx;
    width: 152rpx;
    height: 60rpx;
    text-align: center;
    line-height: 56rpx;
    border: 2rpx solid #a1a1a1;
    border-radius: 32px;
    color: #262626;

    &.on {
      border-color: #f84a33;
      color: #f84a33;
    }
  }
}
</style>
